<template>
  <div style="padding: 24px">
    <div>
      <el-row :gutter="16">
        <el-col :span="12">
          <div class="cooperator-title"> 得分情况 </div>
          <div class="chart h-360px" ref="chartDom"></div>
        </el-col>
        <el-col :span="12">
          <div class="cooperator-title"> 推荐技术 </div>
          <div style="padding: 0 24px">
            推荐使用
            <span v-for="item in recommend" :key="item.name">{{ item.name }} 、</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <div class="cooperator-title"> 恢复技术原始赋分表 </div>
      <el-table :data="totalScore" size="large" fit>
        <el-table-column prop="name" fixed="left" label="恢复技术" min-width="160" />
        <template v-for="item in columns" :key="item.prop">
          <el-table-column :prop="item.prop" :label="item.name" align="center" min-width="80" />
        </template>
        <el-table-column prop="score" fixed="right" label="得分" align="center" width="80">
          <template #default="scope">
            <el-button link type="primary">{{ scope.row.score }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div :span="24" class="text-center mt-16px">
      <el-button @click="cancel">上一步</el-button>
      <el-button type="primary" @click="next" :loading="formLoading">下一步</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { useChart } from './useChart'
import type { FormType } from '../types'

defineOptions({ name: 'Step5Form' })

const recommend = ref()
const formLoading = ref(false)

const emits = defineEmits<{
  (e: 'next'): void
  (e: 'cancel'): void
}>()

const { formRecord } = defineProps<{
  formRecord: FormType
}>()

const next = () => {
  emits('next')
}
const cancel = () => {
  emits('cancel')
}

// 总分
const calculate = (score, weight) => {
  let result = 0
  let childrenKey = {}
  for (let i = 0; i < weight.length; i++) {
    const weightItem = weight[i]
    let trem = 0
    if (weight[i].children && weight[i].children.length) {
      const itemList = calculate(score, weightItem.children)
      trem = itemList.result
      childrenKey = Object.assign(childrenKey, itemList.childrenKey)
    } else {
      trem = score[weightItem.keyName] * weightItem.value
      childrenKey[weightItem.keyName] = Number(trem.toFixed(2))
    }
    result += trem
  }
  return { result, childrenKey }
}

// 计算得分
const totalScore = ref<any[]>([])
const calculateScore = () => {
  const result = formRecord.score.map((item: any) => {
    const { result, childrenKey } = calculate(item, formRecord.weight)
    return {
      name: item.name,
      score: result.toFixed(2),
      ...childrenKey
    }
  })
  // 按score排序
  result.sort((a, b) => Number(b.score) - Number(a.score))
  return result
}

// 绘图
const chartDom = ref<any>(null)
const drawChart = () => {
  const chart = echarts.init(chartDom.value)
  const { options } = useChart(totalScore.value)
  chart.setOption(options)
}

const columns = ref()
// 递归获取所有叶子节点key
const getChildrenKey = (arr: any[]) => {
  let result: { prop: string; name: string }[] = []
  for (let i = 0; i < arr.length; i++) {
    const data = arr[i]
    if (data.children && data.children.length) {
      const children = getChildrenKey(data.children)
      result = result.concat(children)
    } else {
      result.push({
        prop: data.keyName,
        name: data.name
      })
    }
  }
  return result
}

const init = () => {
  columns.value = getChildrenKey(formRecord.weight)

  totalScore.value = calculateScore()
  // 推荐
  recommend.value = totalScore.value.slice(0, 3)
  nextTick(() => {
    drawChart()
  })
}
init()
</script>

<style lang="scss" scoped>
.cooperator-title {
  position: relative;
  padding-left: 20px;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.5px;
  color: var(--el-font-color-primary);

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #50bfff;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    content: '';
  }
}
</style>
